<template>
  <div class="customer-add">
    <mt-cell title="客商类型" :value="post.customerType" is-link @click.native="handleSelectTest"></mt-cell>
    <mt-cell title="客商性质" :value="post.customerNature" is-link @click.native="handleSelectNature"></mt-cell>

    <div class="module-info">
      <mt-field label="姓名" placeholder="请输入姓名" v-model="post.name"></mt-field>
      <mt-field label="手机号" placeholder="请输入手机号" v-model="post.phone"></mt-field>
      <mt-field label="地址" placeholder="请输入地址" v-model="post.phone"></mt-field>
    </div>

    <div class="module-other">
      <mt-field label="期初应收款" placeholder="请输入期初应收款" v-model="post.money"></mt-field>
    </div>

    <div class="module-note">
      <span class="note-title">备注信息</span>
      <textarea v-model="post.comments" class="note-textarea" placeholder="请输入备注信息" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>
    </div>

    <div class="button-content">
      <div class="button-block">
        <mt-button type="default" @click="handleCancel">返回</mt-button>
      </div>
      <div class="button-block">
        <mt-button type="primary" @click="handleSendConfirm">确定</mt-button>
      </div>
    </div>

    <mt-popup
      v-model="popupNature"
      position="bottom" class="popup-nature">
      <mt-picker :slots="slotsNature" class="picker" @change="onNatureChange" :visible-item-count="5" ></mt-picker >
      <div class="button-content">
        <mt-button type="danger" @click="handleSure">确认</mt-button>
      </div>
    </mt-popup>
  </div>
</template>

<script>
export default {
  props:{
    title:String,
  },
  data(){
    return{
      popupNature:false,
      testNature:'',
      slotsNature: [
        {
          flex: 1,
          values: ['一般企业s','保险客户'],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      post:{
        customerType:'客户',
        customerNature:'请选择',
        comments:'',
      }
    }
  },
  methods:{
    handleCancel(){
      this.$emit('customerAddClose')
    },
    handleSelectNature(){
      this.popupNature=true
    },
    onNatureChange(picker, values){
      this.testNature=values[0]
    },
    handleSure(){
      this.post.customerNature=this.testNature
      this.popupNature=false
    },
  }
}
</script>
<style>
  .customer-add .module-info{
    margin: 12px 0;
  }
  .customer-add .module-other{
    margin:0 0 12px;
  }
  .customer-add .module-note{
    background: #fff;
    display: flex;
    padding:12px;
  }
  .customer-add .module-note .note-title{
    font-size: 16px;
    width: 105px;
  }
  .customer-add .module-note .note-textarea{
    width: 70%;
    height:120px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    outline: 0;
    padding:0 10px;
    font-size: 16px;
    text-align: right;
  }
  .customer-add .button-content{
    display: flex;
    padding:24px 12px;
  }
  .customer-add .button-block{
    width: 50%;
    padding: 0 12px;
  }
  .customer-add .button-block .mint-button{
    width: 100%;
  }
  .customer-add .button-block .mint-button--primary{
    background:#007EE5;
  }
  .customer-add .module-info .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }
  .customer-add .module-other .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }
  .customer-add .popup-nature{
    width: 100%;

  }
</style>
